<!--
 * @version:
 * @Author: jiaqngzhen
 * @Company: aikucun
 * @Date: 2020-06-04 14:26:18
 * @LastEditors: jiaqingzhen
 * @LastEditTime: 2020-06-11 13:44:39
 * @Description:
-->
<template>
  <div class="product_warp">
    <div class="warp" @click="goDetail">
      <img :src="productObj.productImage" alt="" />
      <p class="product_name more_text">{{ productObj.productName }}</p>
      <div class="price">
        <div class="left">
          <p class="line_price">¥{{ productObj.underlinePrice }}</p>
          <p class="text">活动价</p>
        </div>
        <div class="active_price">{{ productObj.price }}</div>
      </div>
    </div>
    <div class="btn share">转发赚钱</div>
  </div>
</template>
<script>
export default {
  name: 'product',
  props: {
    productObj: {
      type: Object,
      default: () => {
        return { productNo: '' };
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    goDetail() {
      // 前往商品详情页
      console.log(this.productObj);
    }
  }
};
</script>
<style lang="scss" scoped>
.product_warp {
  width: 174px;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 7px;
  img {
    width: 154px;
    height: 154px;
    object-fit: cover;
    margin-bottom: 7px;
  }
  p {
    width: 100%;
  }
  .price {
    display: flex;
  }
  .product_name {
    font-size: 13px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 9px;
  }
  .line_price {
    font-size: 10px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    text-decoration: line-through;
    color: #b4b4b4;
  }
  .text {
    font-size: 10px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #000000;
  }
  .active_price {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: rgba(255, 0, 0, 1);
    margin-left: 4px;
  }
  .btn {
    width: 100px;
    height: 23px;
    background: rgba(255, 155, 25, 1);
    border-radius: 11px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 23px;
    margin-left: 27px;
    margin-top: 9px;
  }
  .share {
    background: #ff0000;
  }
}
.more_text {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  overflow-y: hidden;
}
</style>
